<template>
	<view class="page-main">
		<view class="page-title">
			<text class="title">请输入短信验证码</text>
			<text class="title-sm">短信已发送至手机 18744666016， <text class="lee-color-gray">重新发送(60s)</text> </text>
		</view>

		<view class="phone-code">
			<yi-code :focus="false" :maxlength="6" type="line" @onComplete="completeCode"></yi-code>
		</view>

		<button :class="completeCodeEnd?'goValidate':'goValidateDis'">验证</button>
		<button class="goValidateCancle" style="opacity: .3;">取消</button>

	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
	import { onShow, onHide, onLoad, onReady, onReachBottom, onPullDownRefresh, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'

	const completeCodeEnd = ref(false)

	onLoad((option) => {
		console.log("查看页面跳页传参", option)
	})

	function onClear() {
		// this.$refs.code.clear()
	}

	function completeCode(code) {
		console.log(`complete:${code}`);
		completeCodeEnd.value = true
	}

	function change(code) {
		console.log(`change:${code}`);
	}
</script>

<style scoped lang="scss">
	.lee-color-gray {
		color: #aaaaaa !important;
	}

	.page-main {
		padding: 0 50rpx;
	}

	.page-title {
		color: #555;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-size: 40rpx;
			padding: 50rpx;
			font-weight: bold;
		}

		.title-sm {
			font-size: 28rpx;

			text {
				color: #1b90ee;
			}
		}
	}

	.phone-code {
		margin-bottom: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	button {
		width: 100%;
		height: 100rpx;
		border-radius: 100rpx;
		margin: 30rpx 0;
		color: #555;
	}

	.goValidateCancle {
		background-color: transparent;
		border: none;

		&:after {
			border: none;
		}
	}

	.goValidate {
		background-color: #1b90ee;
		color: #fff;
	}
</style>